<template>
  <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="horizontal"
      :ellipsis="false"
      @select="handleSelect"
      router
  >
    <!-- 左侧Logo -->
    <el-menu-item index="0" class="logo-item" route="/">
<!--      < img src="./assets/logo.svg" alt="Logo" class="logo">-->
    </el-menu-item>

    <!-- 左侧菜单项 -->
    <div class="flex-grow" />
    <el-menu-item index="/">首页</el-menu-item>
    <el-sub-menu index="products">
      <template #title>产品中心</template>
      <el-menu-item index="/products/app">移动应用</el-menu-item>
      <el-menu-item index="/products/web">网站建设</el-menu-item>
      <el-menu-item index="/products/YuanQu">园区服务</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="/about">关于我们</el-menu-item>
    <el-menu-item index="/contact">联系我们</el-menu-item>

    <!-- 右侧菜单项 -->
    <div class="flex-grow" />
    <el-menu-item index="/support">
      <el-icon><QuestionFilled /></el-icon>支持中心
    </el-menu-item>
  </el-menu>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import { QuestionFilled } from '@element-plus/icons-vue'

const activeIndex = ref(useRoute().path)
const handleSelect = (index) => {
  activeIndex.value = index
}
</script>

<style scoped>
.flex-grow {
  flex-grow: 1;
}

.logo-item {
  padding: 0 20px !important;
}

.logo {
  height: 40px;
  width: auto;
}

.el-menu {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  border-bottom: solid 1px #e6e6e6;
}

.el-menu--horizontal {
  height: 60px;
}

.el-menu-item {
  font-size: 16px;
  transition: all 0.3s;
}

.el-menu-item:hover {
  background-color: #f5f7fa !important;
  transform: translateY(-2px);
}

.el-sub-menu__title:hover {
  background-color: #f5f7fa !important;
}
</style>
